<template>
  <div class="classify app_content">
    <!-- 导航栏  titelText="详情信息"-->
    <div class="header_body">
      <header-nav :slefBack="true" @goBack="goBack"> </header-nav>
    </div>
    <div class="detail_body">
      <van-cell-group inset>
        <van-image
            width="100%"
            height="100"
            :src="itemInfo.electronImage"
            @click="showImagePreview([itemInfo.electronImage])"
        />
        <van-cell title="电子证照" :value="itemInfo.electronImage" />
        <van-cell title="证书编号" :value="itemInfo.documentCode" />
        <van-cell title="生产者" :value="itemInfo.document" />
        <van-cell title="产品名称" :value="itemInfo.productName" />
        <van-cell title="产品型号" :value="itemInfo.productModel" />
        <van-cell title="品目名称" :value="itemInfo.itemName" />
        <van-cell title="涵盖型号" :value="itemInfo.coverModel" />
        <van-cell title="首次发证日期" :value="itemInfo.issuanceTime" />
        <van-cell title="证书有效期" :value="itemInfo.effectiveTime" />
        <van-cell title="证书状态" :value="itemInfo.documentState" />
        <van-cell title="归档状态" :value="itemInfo.fileState" />
      </van-cell-group>
    </div>
  </div>
</template>
<script setup name="ItemInfo">
import { showImagePreview } from 'vant';
const router = useRouter();
const itemInfo = ref({})
onMounted(() => {
  const query = router?.currentRoute?.value?.query;
  itemInfo.value = JSON.parse(query.itemInfo)
})
const goBack = () => {
  router.go(-1);
};
</script>
<style lang="less" scoped>
.classify {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
</style>